<template>
    <div>
        <!-- 新增部门弹出框 -->
        <div class="updatePwd" v-show="updatePopShow">
            <transition name="slide-fade">
                <div class="updatePwd-content" v-show="updatePopShow">
                    <div class="up-content-title">
                        <div>
                            选择部门
                        </div>
                        <div @click="cancelClick">
                            X
                        </div>
                    </div>
                    <div class="up-content-main">
                        <div class="transfer-left">
                            <div class="transfer-title">
                                选择：
                            </div>
                            <div class="transfer-main transfer-mainLeft">
                                <div class="transfer-ml-bread">
                                    <div class="transfer-ml-breadMain">
                                        <ul>
                                            <li :class="{breadMainLi:true,breadMainSeleteLi:isBreadMainSeleteLi == index}" :key="index" v-for="(item,index) in breadLists">
                                                <div @click="breadListsClick(index)">{{item.name}}</div>
                                                <div v-show="isBreadMainSeleteLi != index">></div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="transfer-ml-selectAll">
                                    <div v-show="deptLeftList.length > 0" class="transfer-ml-selectAllMain" @click="leftSelectAllClick">
                                        <div>
                                            <img v-if="leftSelectShow" src="/static/img/iconfont_xuanzhong@2x.png" alt="">
                                            <img v-else src="/static/img/iconfont_weixuan@2x.png" alt="">
                                        </div>
                                        <div>
                                            全选
                                        </div>
                                    </div>
                                </div>
                                <div class="transfer-ml-list">
                                    <ul>
                                        <li class="transferMlListLi" :key="index" v-for="(item,index) in deptLeftList">
                                            <div class="transferMlListLiLeft">
                                                <div class="trMlLiLiLeSlect">
                                                    <div @click="transferPLListsSelectClick(index)">
                                                        <img v-if="item.show" src="/static/img/iconfont_xuanzhong@2x.png" alt="">
                                                        <img v-else src="/static/img/iconfont_weixuan@2x.png" alt="">
                                                    </div>
                                                </div>
                                                <div class="trMlLiLiLeSlectImg" @click="transferPLListsSelectClick(index)">
                                                    <div>
                                                        <img v-if='item.isCompany' src="/static/img/enterprise.jpg" alt="">
                                                        <img v-else src="/static/img/dept.jpg" alt="">
                                                    </div>
                                                </div>
                                                <div class="trMlLiLiLeSlectTypeDept" @click="transferPLListsSelectClick(index)">
                                                    {{item.name}}
                                                </div>
                                            </div>
                                            <div class="transferMlListLiRight">
                                                <img @click="leftNextClick(index)" :class='{cursorMove:item.show}' src="/static/img/下一级.png" alt="">
                                                <div @click="leftNextClick(index)" :class='{cursorMove:item.show}'>下级</div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="transfer-right">
                            <div class="transfer-title">
                                已选：
                            </div>
                            <div class="transfer-main transfer-mainRight">
                                <ul>
                                    <li class="transferPRLi" :key="index" v-for="(item,index) in deptRightList">
                                        <div>
                                            <img v-if='item.isCompany' src="/static/img/enterprise.jpg" alt="">
                                            <img v-else src="/static/img/dept.jpg" alt="">
                                            <div>{{item.name}}</div>
                                        </div>
                                        <div @click="righttransferPRListsClick(index)">
                                            <img src="/static/img/清空.png" alt="">
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="up-content-but">
                        <div></div>
                        <div @click="affirmClick">
                            保存
                        </div>
                    </div>
                </div>
            </transition>
        </div>
    </div>
</template>
<script>
    import { mapActions } from "vuex";
    export default {
        props: ["updatePop", "DepttransferPDepitLListspop", "Deptselectpop", "roleMemberId"],
        data() {
            return {
                leftNextClickTrue: false, // 下一级验证
                updatePopShow: false, // 人员选择列表
                deptLeftList: [], // 未选部门列表
                deptRightList: [], //已选部门列表
                leftSelectShow: false, // 全选
                isBreadMainSeleteLi: 0, // 选中导航
                breadLists: [], // 部门导航

            };
        },
        created: function () { },
        mounted: function () {
            var self = this
        },
        watch: {
            updatePop(val) {
                var self = this;
                self.leftSelectShow = false;
                self.updatePopShow = val;
                self.deptLeftList = [];
                // 编辑时传入已有部门
                self.deptRightList = [];
                self.getapideptfindmembermmscopetree({
                    memberId: self.roleMemberId,
                }).then(data => {
                    if (data.statusCode == 200) {
                        if (data.data) {
                            var arr = [];
                            arr.push({
                                id: data.data.id,
                                name: data.data.name,
                                isCompany:data.data.isCompany,
                                show: false
                            });
                            if (self.Deptselectpop.length > 0) {
                                self.deptRightList = self.Deptselectpop;
                                for (let i = 0; i < arr.length; i++) {
                                    for (let j = 0; j < self.deptRightList.length; j++) {
                                        if (arr[i].id == self.deptRightList[j].id) {
                                            arr[i].show = true
                                        }
                                    }
                                }
                            }
                            self.deptLeftList = arr;
                            if (self.deptLeftList.length > 0) {
                                self.leftSelectShow = true
                                for (let i = 0; i < self.deptLeftList.length; i++) {
                                    if (self.deptLeftList[i].show == false) {
                                        self.leftSelectShow = false
                                    }
                                }
                            }
                        }
                    } else {
                        self.$message({
                            type: "info",
                            message: data.statusMessage
                        });
                    }
                }).catch(msg => {
                    self.$message({
                        type: "info",
                        message: "服务器异常"
                    });
                });
                self.breadLists = [
                    {
                        name: "企业数据",
                        id: sessionStorage.getItem("ORGID"),

                    }
                ];
                self.isBreadMainSeleteLi = 0;

            },
            DepttransferPDepitLListspop(val) {
                var self = this;
            }
        },
        methods: {
            // 部门确认
            affirmClick() {
                var self = this;
                self.updatePopShow = false;
                this.$emit("affirm", self.deptRightList);
            },
            // 选择部门取消弹框
            cancelClick() {
                var self = this;
                this.updatePopShow = false;
                this.$emit("cancel", this.transferPRListsCopyArr);
            },

            // 左边点击导航
            breadListsClick(index) {
                var self = this;
                if (index > 1) {
                    self.getbookapibookselectdepttree({
                        appid: sessionStorage.getItem("getAppid"),
                        memberId: self.roleMemberId,
                        deptId: self.breadLists[index].id
                    }).then(data => {
                        self.deptLeftList = [];
                        if (data.statusCode == 200) {
                            if (data.data) {
                                if (data.data.deptList) {
                                    data.data.deptList.forEach(function (ele, ind) {
                                        self.deptLeftList.push({
                                            id: ele.id,
                                            name: ele.name,
                                            isCompany:ele.isCompany,
                                            show: false
                                        });
                                    });
                                    if (self.deptRightList.length > 0) {
                                        for (let i = 0; i < self.deptLeftList.length; i++) {
                                            for (let j = 0; j < self.deptRightList.length; j++) {
                                                if (self.deptLeftList[i].id == self.deptRightList[j].id) {
                                                    self.deptLeftList[i].show = true
                                                }
                                            }
                                        }
                                    }
                                    if (self.deptLeftList.length > 0) {
                                        self.leftSelectShow = true
                                        for (let i = 0; i < self.deptLeftList.length; i++) {
                                            if (self.deptLeftList[i].show == false) {
                                                self.leftSelectShow = false
                                            }
                                        }
                                    }
                                }
                            }
                        } else {
                            self.$message({
                                type: "info",
                                message: data.statusMessage
                            });
                        }
                    }).catch(msg => {
                        self.deptLeftList = [];
                        self.$message({
                            type: "info",
                            message: "服务器异常"
                        });
                    });
                } else {
                    self.getapideptfindmembermmscopetree({
                        memberId: self.roleMemberId,
                    }).then(data => {
                        if (data.statusCode == 200) {
                            if (data.data) {
                                var arr = [];
                                if (index == 0) {
                                    arr.push({
                                        id: data.data.id,
                                        name: data.data.name,
                                        isCompany: data.data.isCompany,
                                        show: false
                                    });
                                } else if (index == 1) {
                                    if (data.data.child) {
                                        data.data.child.forEach(function (ele, ind) {
                                            arr.push({
                                                id: ele.id,
                                                name: ele.name,
                                                isCompany: ele.isCompany,
                                                show: false
                                            });
                                        });
                                    }
                                }

                                if (self.Deptselectpop.length > 0) {
                                    if (arr.length > 0) {
                                        self.deptRightList = self.Deptselectpop;
                                        for (let i = 0; i < arr.length; i++) {
                                            for (let j = 0; j < self.deptRightList.length; j++) {
                                                if (arr[i].id == self.deptRightList[j].id) {
                                                    arr[i].show = true
                                                }
                                            }
                                        }
                                    }
                                }
                                self.deptLeftList = arr;
                                if (self.deptLeftList.length > 0) {
                                    self.leftSelectShow = true
                                    for (let i = 0; i < self.deptLeftList.length; i++) {
                                        if (self.deptLeftList[i].show == false) {
                                            self.leftSelectShow = false
                                        }
                                    }
                                }
                            }
                        } else {
                            self.$message({
                                type: "info",
                                message: data.statusMessage
                            });
                        }
                    }).catch(msg => {
                        self.$message({
                            type: "info",
                            message: "服务器异常"
                        });
                    });
                }
                self.isBreadMainSeleteLi = index
                self.breadLists.splice(index + 1, (self.breadLists.length - index - 1))

            },
            // 左边下一级
            leftNextClick(index) {
                var self = this;
                // if(self.deptLeftList[index].show == true){
                //     // return;
                // }

                if (self.leftNextClickTrue == false) {
                    if (self.breadLists.length == 1) {
                        self.leftNextClickTrue = true;
                        self.breadLists.push(self.deptLeftList[index])
                        self.isBreadMainSeleteLi = (self.breadLists.length - 1)
                        self.getapideptfindmembermmscopetree({
                            memberId: self.roleMemberId,
                        }).then(data => {
                            if (data.statusCode == 200) {
                                if (data.data) {
                                    var arr = [];
                                    if (data.data.child) {
                                        data.data.child.forEach(function (ele, ind) {
                                            arr.push({
                                                id: ele.id,
                                                name: ele.name,
                                                isCompany:ele.isCompany,
                                                show: false
                                            });
                                        });
                                    }
                                    if (self.Deptselectpop.length > 0) {
                                        self.deptRightList = self.Deptselectpop;
                                        for (let i = 0; i < arr.length; i++) {
                                            for (let j = 0; j < self.deptRightList.length; j++) {
                                                if (arr[i].id == self.deptRightList[j].id) {
                                                    arr[i].show = true
                                                }
                                            }
                                        }
                                    }
                                    self.deptLeftList = arr;
                                    if (self.deptLeftList.length > 0) {
                                        self.leftSelectShow = true
                                        for (let i = 0; i < self.deptLeftList.length; i++) {
                                            if (self.deptLeftList[i].show == false) {
                                                self.leftSelectShow = false
                                            }
                                        }
                                    }
                                }
                            } else {
                                self.$message({
                                    type: "info",
                                    message: data.statusMessage
                                });
                            }
                            self.leftNextClickTrue = false;
                        }).catch(msg => {
                            self.$message({
                                type: "info",
                                message: "服务器异常"
                            });
                            self.leftNextClickTrue = false;
                        });
                    } else if (self.breadLists.length > 1) {
                        self.breadLists.push(self.deptLeftList[index])
                        self.isBreadMainSeleteLi = (self.breadLists.length - 1)
                        self.leftNextClickTrue = true;
                        // 获取下一级导航变化
                        self.getbookapibookselectdepttree({
                            appid: sessionStorage.getItem("getAppid"),
                            memberId: self.roleMemberId,
                            deptId: self.deptLeftList[index].id
                        }).then(data => {
                            self.deptLeftList = [];
                            self.leftNextClickTrue = false;
                            if (data.statusCode == 200) {
                                if (data.data) {
                                    if (data.data.deptList) {
                                        self.deptLeftList = []; // 成员未选中列表-部门
                                        data.data.deptList.forEach(function (ele, ind) {
                                            self.deptLeftList.push({
                                                id: ele.id,
                                                name: ele.name,
                                                isCompany:ele.isCompany,
                                                show: false
                                            });
                                        });
                                        if (self.deptRightList.length > 0) {
                                            for (let i = 0; i < self.deptLeftList.length; i++) {
                                                for (let j = 0; j < self.deptRightList.length; j++) {
                                                    if (self.deptLeftList[i].id == self.deptRightList[j].id) {
                                                        self.deptLeftList[i].show = true
                                                    }
                                                }
                                            }
                                        }
                                        if (self.deptLeftList.length > 0) {
                                            self.leftSelectShow = true
                                            for (let i = 0; i < self.deptLeftList.length; i++) {
                                                if (self.deptLeftList[i].show == false) {
                                                    self.leftSelectShow = false
                                                }
                                            }
                                        }
                                    }
                                }
                            } else {
                                self.$message({
                                    type: "info",
                                    message: data.statusMessage
                                });
                            }
                        }).catch(msg => {
                            self.deptLeftList = [];
                            self.leftNextClickTrue = false;
                            self.$message({
                                type: "info",
                                message: "服务器异常"
                            });
                        });
                    }
                }
            },
            // 左边全选
            leftSelectAllClick() {
                var self = this;
                self.leftSelectShow = !self.leftSelectShow;
                if (self.leftSelectShow == true) {
                    let copyOklist = []
                    for (let i = 0; i < self.deptLeftList.length; i++) {
                        let showPush = false
                        for (let j = 0; j < self.deptRightList.length; j++) {
                            if (self.deptLeftList[i].id == self.deptRightList[j].id) {
                                showPush = true
                            }
                        }
                        if (showPush == false) {
                            copyOklist.push(self.deptLeftList[i])
                        }
                        self.deptLeftList[i].show = true
                    }
                    copyOklist.forEach(ele => {
                        self.deptRightList.push({
                            id: ele.id,
                            name: ele.name,
                            isCompany:ele.isCompany,
                        })
                    })
                } else {
                    let copyDelectlist = []
                    for (let i = 0; i < self.deptLeftList.length; i++) {
                        self.deptLeftList[i].show = false
                    }
                    for (let i = 0; i < self.deptRightList.length; i++) {
                        let showPush = false
                        for (let j = 0; j < self.deptLeftList.length; j++) {
                            if (self.deptRightList[i].id == self.deptLeftList[j].id) {
                                showPush = true
                            }
                        }
                        if (showPush == false) {
                            copyDelectlist.push(self.deptRightList[i])
                        }
                    }
                    self.deptRightList = copyDelectlist
                }

            },
            // 左边点击选中
            transferPLListsSelectClick(index) {
                let self = this
                self.deptLeftList[index].show = !self.deptLeftList[index].show
                if (self.deptLeftList[index].show == true) {
                    self.deptRightList.push(self.deptLeftList[index])
                } else {
                    let delectI = ''
                    for (let i = 0; i < self.deptRightList.length; i++) {
                        if (self.deptLeftList[index].id == self.deptRightList[i].id) {
                            delectI = i
                        }
                    }
                    self.deptRightList.splice(delectI, 1)
                }
                if (self.deptLeftList.length > 0) {
                    self.leftSelectShow = true
                    for (let i = 0; i < self.deptLeftList.length; i++) {
                        if (self.deptLeftList[i].show == false) {
                            self.leftSelectShow = false
                        }
                    }
                }
            },
            // 右边选中删除
            righttransferPRListsClick(index) {
                var self = this;
                for (let i = 0; i < self.deptLeftList.length; i++) {
                    if (self.deptRightList[index].id == self.deptLeftList[i].id) {
                        self.deptLeftList[i].show = false
                    }
                }
                self.deptRightList.splice(index, 1)
                if (self.deptLeftList.length > 0) {
                    self.leftSelectShow = true
                    for (let i = 0; i < self.deptLeftList.length; i++) {
                        if (self.deptLeftList[i].show == false) {
                            self.leftSelectShow = false
                        }
                    }
                }
            },
            ...mapActions(["getbookapibookselectdepttree", 'getapideptfindmembermmscopetree'])
        }
    };
</script>
<style scoped>
    .transferMlListLiRight {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        margin-right: 11px;
        color: #333;
    }

    .transferMlListLiRight img {
        width: 20px;
        height: 20px;
        margin-right: 5px;
    }

    .trMlLiLiLeSlectTypeDept {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 200px;
        font-size: 14px;
        height: 20px;
        line-height: 20px;
        color: #333;
        margin-left: 5px;
        /* border: 1px solid red; */
    }

    .trMlLiLiLeSlectImg {
        height: 20px;
        width: 20px;
        margin-left: 10px;
    }

    .trMlLiLiLeSlect {
        height: 20px;
        width: 20px;
    }

    .trMlLiLiLeSlect>div,
    .trMlLiLiLeSlectImg>div {
        width: 20px;
        height: 20px;
    }

    .trMlLiLiLeSlect img,
    .trMlLiLiLeSlectImg img {
        width: 20px;
        height: 20px;
    }

    .transferMlListLiLeft {
        min-width: 10px;
        display: flex;
        align-items: center;
        margin-left: 17px;
    }

    .transferMlListLi:hover {
        background-color: rgb(231, 234, 239);
    }

    .transferMlListLi {
        width: 100%;
        height: 35px;
        margin-top: 3px;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
    }

    .transfer-ml-list ul {
        width: 100%;
    }

    .transfer-ml-list {
        display: flex;
        height: 280px;
        width: 100%;
        margin-top: 5px;
        flex-direction: column;
        overflow-x: hidden;
        overflow-y: scroll;
    }

    .transfer-ml-selectAllMain>div:nth-child(1) {
        width: 20px;
        height: 20px;
        cursor: pointer;
    }

    .transfer-ml-selectAllMain>div:nth-child(2) {
        font-size: 14px;
        margin-left: 7px;
        cursor: pointer;
    }

    .transfer-ml-selectAllMain>div img {
        width: 20px;
        height: 20px;
    }

    .transfer-ml-selectAllMain {
        width: 90%;
        display: flex;
        height: 20px;
        overflow: hidden;
        align-items: center;
    }

    .transfer-ml-selectAll {
        display: flex;
        height: 22px;
        width: 100%;
        overflow: hidden;
        justify-content: center;
        margin-top: 5px;
    }

    .breadMainLiBack {
        color: #38adff;
        width: 12px;
        height: 20px;
        cursor: pointer;
        margin-right: 5px;
    }

    .breadMainLi {
        display: flex;
        align-items: center;
        margin-right: 5px;
    }

    .breadMainLi>div:nth-child(1) {
        color: #38adff;
        font-size: 14px;
        max-width: 100px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        cursor: pointer;
    }

    .breadMainLi>div:nth-child(2) {
        font-size: 14px;
        color: #ccc;
        margin-left: 5px;
    }

    .breadMainSeleteLi>div:nth-child(1) {
        color: #333 !important;
    }

    .transfer-ml-breadMain ul {
        display: flex;
        min-height: 20px;
        width: 100%;
        flex-wrap: wrap;
    }

    .transfer-ml-breadMain {
        width: 350px;
        display: flex;
        min-height: 20px;
    }

    .transfer-ml-bread {
        min-height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 8px;
    }

    .transfer-ml-search>div {
        width: 90%;
        border: 1px solid #ccc;
        display: flex;
        align-items: center;
        height: 32px;
        border-radius: 4px;
        background-color: #fff;
        overflow: hidden;
    }

    .transfer-ml-search input {
        font-size: 14px;
        border: 0px solid #ccc;
        min-height: 25px;
        border-radius: 5px;
        height: 32px;
        width: calc(100% - 10px);
        background-color: #fff;
    }

    .transfer-ml-search>div>div:nth-child(1) {
        width: 32px;
        display: flex;
        align-items: center;
        height: 32px;
        justify-content: center;
    }

    .transfer-ml-search>div>div:nth-child(2) {
        width: calc(100% - 55px);
    }

    .transfer-ml-search>div>div:nth-child(1) img {
        width: 15px;
        height: 15px;
    }

    .transfer-ml-search>div>div:nth-child(3) {
        width: 20px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .transfer-ml-search>div>div:nth-child(3) img {
        width: 15px;
        height: 15px;
    }

    .transfer-ml-search {
        height: 37px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        margin-top: 15px;
    }

    .transferPRLi {
        width: 100%;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 5px;
        cursor: pointer;
    }

    .transferPRLi:hover {
        background-color: rgb(231, 234, 239);
    }

    .transferPRLi>div:nth-child(1) {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #333;
        margin-left: 15px;
    }

    .transferPRLi>div:nth-child(2) {
        font-size: 14px;
        color: #ccc;
        margin-left: 15px;
        border-radius: 50%;
        width: 18px;
        height: 18px;
        border: 1px solid #ccc;
        cursor: pointer;
        text-align: center;
        line-height: 18px;
        margin-right: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .transferPRLi>div:nth-child(1)>div {
        max-width: 200px;
        overflow: hidden;
        margin-left: 7px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .transferPRLi>div:nth-child(1) img {
        width: 20px;
        height: 20px;
    }

    .transfer-mainRight {
        overflow-x: hidden;
        overflow-y: scroll;
    }

    .transfer-main {
        width: 92%;
        height: 50px;
        font-size: 16px;
        color: #333;
        height: 350px;
        background-color: #f4f6f8;
        border-radius: 5px;
        border: 1px solid #ccc;
    }

    .transfer-title {
        width: 92%;
        height: 50px;
        line-height: 50px;
        font-size: 16px;
        color: #333;
    }

    .transfer-left {
        width: 50%;
        height: 420px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        padding-right: 15px;
    }

    .transfer-right {
        width: 50%;
        height: 420px;
        padding-left: 15px;
    }

    .up-content-main {
        height: 430px;
        width: 100%;
        border-top: 1px solid #e5e5e5;
        display: flex;
        justify-content: space-around;
    }

    .up-content-but {
        height: 60px;
        width: 100%;
        background-color: #f0f6fa;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid #e5e5e5;
    }

    .up-content-but>div:nth-child(2) {
        width: 55px;
        height: 35px;
        border-radius: 4px;
        background-color: #38adff;
        text-align: center;
        line-height: 35px;
        color: #fff;
        margin-right: 25px;
        cursor: pointer;
    }

    .up-content-title>div:nth-child(1) {
        margin-left: 15px;
    }

    .up-content-title>div:nth-child(2) {
        margin-right: 15px;
        font-size: 16px;
        color: #ccc;
        cursor: pointer;
    }

    .up-content-title {
        height: 50px;
        width: 100%;
        background-color: #f0f6fa;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .updatePwd-content {
        width: 90%;
        max-width: 850px;
        min-width: 850px;
        height: 550px;
        background-color: #fff;
        border-radius: 5px;
        overflow: hidden;
        margin-top: 70px;
    }

    .updatePwd {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;

        background-color: rgba(0, 0, 0, 0.2);
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow: hidden;
        z-index: 10000000000;
    }

    .slide-fade-enter-active {
        transition: all 0.7s ease;
    }

    .slide-fade-enter,
    .slide-fade-leave-active {
        transform: translateY(-30px);
        opacity: 0;
    }

    .cursorMove {
        /* cursor: no-drop !important; */
    }
</style>